body > section#wrapper {

  div[data-name="aboutme"] {

    > div {
      position: relative;
      max-width: 1024px;
      margin: 20px 0 40px;
      display: flex;

      > div.desc {
        @include mask('settings/icon-quote', $textColorLight, 36px);
        position: relative;
        padding: 17px 50px 0 50px;
        text-align: justify;
        flex: 1;

        > p {
          font-size: 110%;
          line-height: 200%;
          margin-bottom: 20px;

          + p {
            margin: 0;
          }

          &.highlight {
            @include mask('settings/icon-heart', $colorError, 34px);
            position: relative;
            font-size: 150%;
            padding: 0 0 0 44px;
            margin-top: 50px;

            &::before {
              -webkit-mask-position-x: 0;
            }
          }
        }

        &::before {
          width: 36px;
          height: 36px;
          left: -5px;
          top: 20px;
        }
      }

      > div.preview {
        position: relative;
        width: 310px;
        height: 310px;
        border-radius: 15px;
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
        background: rgba($mainColor2,0.2);
        overflow: hidden;

        > img {
          display: block;
          width: 100%;
        }

        > a {
          position: absolute;
          bottom: 10px;
          margin: auto;
          display: block;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba($textColorInverted, 0.8);
          transition: background 0.3s;

          &.github {
            @include mask('settings/icon-github', $textColor, 24px);
            left: 10px;
          }

          &.website {
            @include mask('icon-web', $textColor, 24px);
            left: 60px;
          }

          &::before {
            background: $gradient;
          }

          &:hover {
            background: $textColorInverted;
          }
        }
      }
    }
  }

  div[data-name='permissions'] {

    div.permissions {

      h3 {
        display: inline-block;
        font-size: 120%;
        font-weight: $__fontWeightMedium;
        line-height: 150%;
        padding: 5px 0;
        margin: 20px 0 0 0;
      }

      div.details {
        @include bubble;

        > a.github {
          @include mask('settings/icon-github', $textColorInverted, 18px);
          padding-left: 34px;
          margin: 15px 0 0 0;

          &::before {
            -webkit-mask-position-x: 7px;
          }
        }
      }
    }

    div.shareInformation {

      p {
        line-height: 150%;

        + p {
          margin-top: 10px;
        }
      }

      ul.bulletList {
        line-height: 150%;
        margin: 10px 0;
      }

      label {
        display: inline-block;
        margin: 15px 20px 7px 0 !important;
      }

      div.checkbox {
        display: inline-block;
        vertical-align: top;
        margin: 16px 0 0 0;
      }
    }
  }
}

@import "../../rtl/include/settings/infos";